/*
 * 根据选择器条件，查找元素，选择器可以使用: #id   .class   element
 * @param selector 选择器字符串参数，如："#box",".text","div"
 * @param context 查找上下文指定的元素内，可选，默认取 document，表全文档内
 * @return 根据选择器查找到的元素
 */
function $(selector,context){
	//短路运算符
	context=context||document;
	//根据id值查找
	if(selector.indexOf("#")===0){
		return document.getElementById(selector.slice(1));
	}
	//根据类名查找
	if(selector.indexOf(".")===0){
		return byClass(selector.slice(1),context);
	}
	//根据元素名查找
	return context.getElementsByTagName(selector);
}

/*
 *在指定的范围内产生随机整数，包括下限，不包括上限
 * */
function random(lower,upper){
	return	Math.floor(Math.random()*(upper-lower)+lower);
}
/*
 * 根据class类名查找元素封装，根据类名查找元素（兼容）
 * @param className 待查找的类名
 * @param context 可选，查询上下文对象，默认为 document
 * @return 根据类名查找到的元素
 */
function byClass(className,context){
	//短路运算符,有参数时使用context，没有时使用document
	context=context ||document;
	//等价于if-else
	/*if(context){
		context=context;
	}else{
		context=document;
	}*/
	//如果浏览器支持document.getElementsByClassName,则直接使用
	if(context.getElementsByClassName){
		return context.getElementsByClassName(className);
		
	//浏览器不支持使用document.getElementsByClassName，则解决兼容
	}else{
		//查找所有的标签元素
		//定义数组，存放查找到的元素标签
		var elements=context.getElementsByTagName("*");
		var result=[];
		//遍历所有的标签
		for(var i=0; i<elements.length; i++){
			//获取当前遍历到的类名
			var classNames=	elements[i].className;
			//用空格分隔当前标签的类名
			var _classnames=classNames.split(" ");
			//遍历每个标签的类名
			for(var j=0; j<_classnames.length; j++){
				//判断当前遍历到的类名是否是待查找的类名
				if(_classnames[j]===className){
					result.push(elements[i]);
					break;
				}
			}
		}
		return result;
	}
}


/*
 
 * 获取元素CSS值
 * @param（参数） element 元素，获取样式的元素标签
 * @param attr 如果传递的是字符串，则表示获取，传递的是对象，则表示设置
 * 对象获取值两种方法：element.属性名 ; element["属性名"]
 * */
function css(element,attr){
	//获取css样式
	if(typeof attr==="string"){
		if(window.getComputedStyle){
		//浏览器支持window.getComputedStyle()
			return window.getComputedStyle(element)[attr];
		}else{
			//浏览器不支持window.getComputedStyle
			return element.currentStyle[attr];
		}
	}
	//设置css属性
	if(typeof attr==="object"){
		for(var attrName in attr){
			element.style[attrName]=attr[attrName];
		}
	}
	
}

//注册事件监听
function on(element,type,callback){
	if(element.addEventListener){//支持addEventListener
		//判断事件是不是on为前缀
		if(type.indexOf("on")===0){
			type=type.slice(2);//去掉on
		}
		element.addEventListener(type,callback);
	}else{
		//判断事件不是on为前缀
		if(type.indexOf("on")!==0){
			type="on"+type;//添加on
		}
		element.attachEvent(type,callback);
	}
}


/*
 
 * 保存cookie
 * @param key cookie的名称
 * @param value cookie的值
 * @param options 可选的参数的对象 如：{expires=7; path=/; domain=; secure=}
 * document.cookie = "key=value;expires=7;domain=;path=/;secure"
 * */


function cookie(key,value,options){
	//保存cookie
	if(typeof value !=="undefined"){
		//options传入时用options，未传入时为空
		var options = options||{};
		
		//串连保存cookie的字符串
		var cookie =encodeURIComponent(key) + "=" + encodeURIComponent(value);
		
		if(options.expires){
			//设置当前时间
			var datetime = new Date();
				datetime.setDate(datetime.getDate() + options.expires);
			//把过期时间串连到cookie上
			cookie +=";expires=" + datetime.toUTCString();
		}
		
		//如果有路径参数
		if(options.path){
			cookie +=";path=" + options.path;
		}

		//如果有domain参数
		if(options.domain){
			cookie +=";domain=" + options.domain; 
		}			
		
		//如果有secure参数
		if(options.secure){
			cookie +=";secure";
		}
		
		//保存cookie
		document.cookie = cookie;
		//结束函数调用
		return;
	}
	//cookie读取的时候
	var cookies=document.cookie;
	//分隔所有cookie
	var _cookie=cookies.split("; ");
	for(var i=0; i<_cookie.length; i++){
		//分隔每个cookie
		var parts=_cookie[i].split("=");
		
		//parts数组中第一个元素为cookie名,shift()返回删除数组中第一个的值
		var name= parts.shift();
		//判断key中是否有要查找的cookie值
		if(name===key){
			//parts数组中剩下的元素以=串连后的内容是cookie值
			return decodeURIComponent(parts.join("="));
		}
	}
	//未找到cookie名则返回undefined
	return undefined;
}
function removeCookie(key,options){
	var options = options || {};
	
	//设置过期时间
	options.expires = -1;
	
	cookie(key,"",options);
}
/*
 
 * 多属性运动
 * @param element 待运动的元素
 * @param options 运动改变的属性
 * @param speed 运动改变的时间
 * */

function animate(element,options,speed,fn){
	//停止已有的计时器
	clearInterval(element.timer);
	//初始值，范围值
	var start={},
		range={};
	for(var attrs in options){
		start[attrs]=parseFloat(css(element,attrs));
		range[attrs]=options[attrs]-start[attrs];
	}
	//计算计时器启动的时间
	var startTime=Date.now();
	//启动计时器
	element.timer=setInterval(function(){
		//计算计时器启动结束时间
		var elapsed=Math.min(Date.now()-startTime,speed);
		//计算每个属性的值
		for(var attrs in options){
			var result=elapsed*range[attrs]/speed+start[attrs];
			element.style[attrs]=result+(attrs==="opacity"?"":"px")
		}
		//判断实际所用时间与规定时间是否相等，若相等则停止
		if(elapsed===speed){
			clearInterval(element.timer);
			//停止计时器后是否有函数调用
			fn&&fn();
		}
	},1000/60);
}
/*
 *淡入
 * @param element 待添加淡入运动动画效果的DOM元素
 * @param speed 总时间
 * @param fn 函数，运动结束后要继续执行的函数，可选
 * 
 * */

function fadeIn(element, speed, fn){
	element.style.display="block";
	element.style.opacity=0;
	animate(element,{opacity:1},speed,fn);
}
/*
 *淡出
 * @param element 待添加淡入运动动画效果的DOM元素
 * @param speed 总时间
 * @param fn 函数，运动结束后要继续执行的函数，可选
 * 
 * */

function fadeOut(element, speed, fn){	
	element.style.opacity=1;
	animate(element,{opacity:0},speed,function(){
		element.style.display="none";
		fn&&fn();
	});
}